<template>
<el-form :model="train" ref="train" label-width="110px" size="mini" :rules="formRules">
    <el-form-item v-if="idVisible" label="序号" prop="id">
        <el-input v-model="train.id" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="主题" prop="subject">
        <el-input v-model="train.subject" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="类型" prop="type">
        <el-select v-model="train.type" placeholder="请选择类型">
            <el-option v-for="(typeone) in trainTypes" :key="typeone.showValue" :label="typeone.label" :value="typeone.showValue"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="品种" prop="kind">
        <el-checkbox-group v-model="train.kind">
            <el-checkbox v-for="(one,index) in kinds" :label="one.index" :key="one.index" name="kind">{{one.showValue}}</el-checkbox>
        </el-checkbox-group>
    </el-form-item>
    <el-form-item label="地区" prop="area">
        <el-input v-model="train.area" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="连锁" prop="shop">
        <el-input v-model="train.shop" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="时间" prop="timeInterval">
        <el-date-picker @change="changeTime" v-model="train.timeInterval" value-format="yyyy-MM-dd HH:mm:ss" unlink-panels type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
        </el-date-picker>
    </el-form-item>
    <el-form-item label="时长（分钟）" prop="len">
        <el-input v-model="train.len" autocomplete="off" readonly></el-input>
    </el-form-item>
    <el-form-item label="关联行程" prop="parent">
        <el-select v-model="train.parent" filterable placeholder="请选择">
            <el-option v-for="item in trips" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="关联PPT（非上传）" prop="ppt" size="small">
        <el-input v-model="train.ppt" autocomplete="off"></el-input>
        <template>
            <el-upload action="string" :multiple="false" :auto-upload="false" :on-change="handleChange" :file-list="fileList">
                <el-button size="small" type="primary">请选择文件</el-button>
            </el-upload>
        </template>
    </el-form-item>
    <el-form-item label="需求" prop="require">
        <el-input type="textarea" v-model="train.require" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="总结" prop="summary">
        <el-input type="textarea" v-model="train.summary" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="反馈" prop="fd">
        <el-input type="textarea" v-model="train.fd" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="影响" prop="effect">
        <el-input type="textarea" v-model="train.effect" autocomplete="off"></el-input>
    </el-form-item>
</el-form>
</template>

<script>
const remote = require("electron").remote;
const db = remote.getGlobal("db_local");
const os = require('os')
export default {
    data() {
        return {
            name: "train-model",
            visual: true,
            idVisible: false,
            trips: [],
            fileList: [],
            pptDir: '',
            train: {
                id: 0,
                subject: "",
                timeInterval: '',
                area: "",
                kind: [],
                type: 0,
                shop: "",
                require: "",
                ppt: "",
                len: 0,
                summary: "",
                fd: "",
                effect: "",
                parent: ''
            },
            formRules: {
                parent: [{
                    required: true,
                    message: '请创建或关联已有行程',
                    trigger: 'blur,change'
                }]
            },
            kinds: [{
                    index: 0,
                    showValue: "疾病知识"
                },
                {
                    index: 1,
                    showValue: "A"
                },
                {
                    index: 2,
                    showValue: "C"
                },
                {
                    index: 3,
                    showValue: "D"
                },
                {
                    index: 4,
                    showValue: "E"
                },
                {
                    index: 5,
                    showValue: "I"
                },
                {
                    index: 6,
                    showValue: "J"
                },
                {
                    index: 7,
                    showValue: "K"
                },
                {
                    index: 8,
                    showValue: "JN"
                },
                {
                    index: 9,
                    showValue: "ZD"
                },
                {
                    index: 10,
                    showValue: "ZDH"
                },
                {
                    index: 11,
                    showValue: "SG"
                },
                {
                    index: 12,
                    showValue: "GA"
                }
            ],
            trainTypes: [{
                    showValue: 0,
                    label: "微信培训"
                },
                {
                    showValue: 1,
                    label: "视频培训"
                },
                {
                    showValue: 2,
                    label: "直播培训"
                },
                {
                    showValue: 3,
                    label: "店员培训"
                },
                {
                    showValue: 4,
                    label: "消费者教育"
                },
                {
                    showValue: 5,
                    label: "员工内训"
                }
            ],
            pickerOptions2: {
                shortcuts: [{
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            }
        };
    },
    created() {
        let sql_trips = 'select id,title from trip';
        db.all(sql_trips, (err, rows) => {
            this.trips = rows;
        })
    },
    methods: {
        changeTime: function (val) {
            let newLen = (new Date(this.train.timeInterval[1].replace(/-/g, '/')).getTime() - new Date(this.train.timeInterval[0].replace(/-/g, '/')).getTime()) / 60000;
            this.$set(this.train, 'len', newLen);
        },
        handleChange: function (file, fileList) {
            this.fileList.shift();
            this.fileList.push(file);
            this.train.ppt = file.raw.path;
        }
    }
};
</script>
